<template>
    <div class="evection-apply">
        <apply-header process-name="出差申请" @cancel-click="cancelClick" @submit-click="submit"/>
        <div class="apply-content">
            <el-form ref="formRef" :model="evection" :rules="rules" label-position="left" label-width="130px" label-suffix="：">
                <form-title title="出差申请"/>
                <el-row>
                    <el-col :span="12">
                        <el-form-item prop="startUserId" style="display: none">
                            <el-input v-model="evection.startUserId"/>
                        </el-form-item>
                        <el-form-item prop="startUser" label="申请人">
                            <el-input v-model="evection.startUser" style="width: 200px" disabled/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item prop="num" label="出差天数">
                            <el-input v-model="evection.num" style="width: 100px" disabled>
                                <template #append>天</template>
                            </el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item prop="beginDate" label="开始时间">
                            <el-date-picker v-model="evection.beginDate" type="date" placeholder="出差开始日期" value-format="YYYY-MM-DD"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item prop="endDate" label="结束时间">
                            <el-date-picker v-model="evection.endDate" type="date" placeholder="出差结束日期" value-format="YYYY-MM-DD"/>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item prop="description" label="出差原由">
                            <el-input v-model="evection.description" type="textarea" placeholder="请输入出差原由"/>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="部门经理审批">
                            <el-select-v2 v-model="evection.manager" :options="managerOptions" placeholder="请选择上级审批领导" disabled/>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="财务审批">
                            <el-select-v2 v-model="evection.finance" :options="financeOptions" placeholder="请选择上级审批领导" disabled/>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>
    </div>
</template>

<script>
import {getCurrentInstance, reactive, ref, toRefs} from "vue";
import {ElLoading, ElMessage} from "element-plus";
import ApplyHeader from "../../com/apply/ApplyHeader.vue";
import FormTitle from "../../com/apply/FormTitle.vue";
import {createEvectionProcess} from "../../../network/process/evection-process";

export default {
    name: "EvectionApply",
    components: { FormTitle, ApplyHeader},
    setup(prop,{emit}){
        const formRef = ref(null);
        const globalProperties = getCurrentInstance()?.appContext.config.globalProperties;
        const validateStartUser = (rule,value,callback)=>{
            if(value===null||value===''){
                callback(new Error('请填写申请人员'));
            }
            callback();
        }
        const form = reactive({
            evection:{
                startUserId: null,
                startUser: null,
                description: null,
                manager: "3",
                gm: "3",
                finance: "12",
                beginDate: null,
                endDate: null,
                num: null,
            },
            rules:{
                startUser: [
                    {validator: validateStartUser,trigger: 'blur'}
                ],
                description: [
                    {required: true,message:'请输入出差原由',trigger:'blur'}
                ],
                manager: [
                    {required: true,message:'请选择审批领导',trigger:'blur'}
                ],
                gm: [
                    {required: true,message:'请选择经理审批人',trigger:'blur'}
                ],
                finance: [
                    {required: true,message:'请选择财务审批人',trigger:'blur'}
                ],
                beginDate: [
                    {required: true,message:'请输入出差开始日期',trigger:'blur'}
                ],
                endDate: [
                    {required: true,message:'请输入出差结束日期',trigger:'blur'}
                ]
            },
            submit(){
                formRef.value.validate((valid)=>{
                    if(valid){
                        let loading = ElLoading.service({
                            lock: true,
                            text: '正在提交出差申请...',
                        });
                        createEvectionProcess(form.evection).then(vo=>{
                            loading.close();
                            globalProperties.$response.handle({
                                data:vo,
                                success:'创建出差申请成功，请耐心等待领导审批...',
                                successFn:()=>{
                                    form.resetForm();
                                    // let returnUrl = globalProperties.$route.query.returnUrl;
                                    // if(returnUrl){
                                        globalProperties.$router.push('/home/my-apply/evection-apply-record');
                                    // }
                                },
                                failFn:()=>{
                                    ElMessage.error('创建出差申请失败!');
                                }
                            })
                        })
                    }else{
                        ElMessage.error('请先完善表单!');
                    }
                })
            },
            resetForm(){
                formRef.value.clearValidate();
                formRef.value.resetFields();
            }
        })
        return {
            ...toRefs(form),
            formRef
        }
    },
    data(){
        return {
            managerOptions: [],
            financeOptions: [],
            gmOptions: [],
        }
    },
    methods:{
        cancelClick() {
            this.$operate.confirm({
                title: '取消申请',
                hint: '你确认要取消申请吗？',
                executeFn: ()=>{
                    let returnUrl = this.$route.query.returnUrl;
                    if(returnUrl){
                        this.$router.push(returnUrl);
                        // console.log('returnUrl',returnUrl)
                    }else{
                        this.$router.push('/home');
                    }
                }
            })
        },
        loadManagerOptions(){
            this.managerOptions = [
                {
                    value: '3',
                    label: '陆萱萱',
                }
            ]
        },
        loadFinanceOptions(){
            this.financeOptions = [
                {
                    value: '12',
                    label: '李克成'
                }
            ]
        },
        //计算出差天数
        calculateNum(){
            if(this.evection.beginDate!==null && this.evection.endDate!==null){
                let num = new Date(this.evection.endDate).howManyDays(this.evection.beginDate);
                this.evection.num = num;
            }else{
                this.evection.num = null;
            }
        },
        init() {
            this.loadManagerOptions();
            this.loadFinanceOptions();
        }
    },
    created() {
        this.init();
        // console.log('this.$route',this.$route);
        // console.log('this.$router',this.$router);
    },
    watch:{
        '$store.state.loginUser.empName'(){
            this.evection.startUser = this.$store.state.loginUser.empName;
            this.evection.startUserId = this.$store.state.loginUser.id;
        },
        'evection.beginDate'(newVal){
            this.calculateNum();
        },
        'evection.endDate'(newVal){
            this.calculateNum();
        }
    },
    computed:{

    }
}
</script>

<style scoped>
*{
    /*border: 1px solid red;*/
}
.evection-apply{

}
.apply-content{
    margin: 0 auto;
    width: 1240px;
    box-shadow: 0 0 2px 1px lightgrey;
    background: rgb(252,252,252);
    padding: 0 20px;
    box-sizing: border-box;
}
</style>
